<template>
    <div>
        <el-container>
            <!-- 头部-->
            <el-header  class="m-header">
                <img class="mlogo" src="../images/logo.png">卫生监督管理系统
                <div class="logoutbutton">
                    <el-button  type="primary" @click="submitLogout" style="margin-left: 1050px">注销</el-button>
                </div>
            </el-header>
            <!-- 菜单-->
            <el-container>
                <el-aside width="200px">
                    <el-menu @select="menuClick">
                        <el-menu-item index="/auditor/auditorinterface">
                            <template slot="title"><i class="el-icon-s-custom"></i>审核系统</template>
                        </el-menu-item>
                        <el-menu-item index="/auditor/auditorfirst">
                            <template slot="title"><i class="el-icon-s-unfold" ></i>初审</template>
                        </el-menu-item>
                        <el-menu-item index="/auditor/auditorreview">
                            <template slot="title"><i class="el-icon-s-unfold"></i>复审</template>
                        </el-menu-item>
                        <el-menu-item index="/auditor/auditorfinal">
                            <template slot="title"><i class="el-icon-s-unfold"></i>终审</template>
                        </el-menu-item>
                    </el-menu>
                </el-aside>

                <el-main>
                    <router-view />
                </el-main>
            </el-container>
        </el-container>
    </div>
</template>

<script>
    export default {
        name: "Auditor",
        methods: {
            menuClick(index) {
                this.$router.push(index);
            },
            submitLogout() {
                this.$confirm('确定要退出登录？', '退出确定', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '退出成功!'
                    });
                    this.$router.replace('/');
                }).catch(() => {
                    this.$router.replace('/auditor/auditorinterface');
                });
            }
        }
    }
</script>

<style >
    .m-header {
        background-color: #B3C0D1;
        color: #333;
    }

    .mlogo{
        margin-left: 15px;
        height:100%;
    }
    .logoutbutton{
        float: right;
        margin-top: 10px;
    }
    .el-aside {
        color: #333;
    }
    .el-menu-item {
        background-color: #f9f9f9;
    }
</style>
